﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <!--<script src="https://cdn.bootcss.com/angular.js/1.2.13/angular.js" >
    </script>-->
    <script src="https://cdn.bootcss.com/angular.js/1.6.4/angular.min.js"></script>
    <script>
        var FLOAT_REGEXP = /^\-?\d+((\.|\,)\d+)?$/;
        angular.module('myApp', []);
         var app = angular.module('myApp');
        app.directive('smartFloat', function () {
            return {
                require: 'ngModel',
                link: function (scope, elm, attrs, ctrl) {
                    ctrl.$parsers.unshift(function (viewValue) {
                       // console.log(viewValue);
                        var i = parseInt(viewValue);
                        if (i >= 0 && i < 10) {
                            ctrl.$setValidity('oneToTen', true);
                            return viewValue;
                        } else {
                            ctrl.$setValidity('oneToTen', false);
                            return undefined;
                        }
                    });
                }
            };
        });

        app
.directive('myDirective', function () {
    return {
        restrict: 'A',
        replace: true,
        scope: {
            //myUrl: '@zhouURL', //绑定策略 指定绑定的属性名称
            //myLinkText: '@zhouLink' //绑定策略
            myUrl: '=someAttr', // 经过了修改
           // myUrl: '@', //绑定策略
            myLinkText: '@' //绑定策略
        },
        template: '<a href="{{myUrl}}">' +
        '{{myLinkText}}</a>'
    };
});

    </script>
</head>
<body ng-app="myApp">
    <form name="signup_form" novalidateng-submit="signupForm()">

              <label>Signup</label>
                <label>Username</label>
                <input type="text"  placeholder="Desired username"   name="ni"  ng-model="username"  smart-Float 
                       ng-minlength=3 ng-maxlength=20 required  />
              
                    <small class="error" ng-show="signup_form.ni.$error.required">
                        Your name is required.
                    </small>
                    <small class="error" ng-show="signup_form.ni.$error.minlength">
                        Your name is required to be at least 3 characters
                    </small>
                    <small class="error" ng-show="signup_form.ni.$error.maxlength">
                        Your name cannot be longer than 20 characters
                    </small>
        <small class="error" ng-show="signup_form.ni.$error.oneToTen">
           请输入1-10
        </small>

        {{signup_form.ni.$dirty}} {{signup_form.ni.$invalid}} {{signup_form.submitted}}
        <div class="error"  ng-show="signup_form.ni.$dirty && signup_form.ni.$invalid && signup_form.submitted">
            aaaaaaaaaaaaaaa
        </div>
            <button type="submit" class="button radius">Submit</button>

        <br />
        <input type="text" ng-model="theirUrl">
        <div my-directive  some-attr="theirUrl"
             my-url="http://baidu.com" zhou-u-r-l="http://baidu.com" zhou-link="百度"
             my-link-text="Click me to go to bai du"></div>
</form>

</body>
</html>
